<template>
    <div class="vip" id="vip">
        vip
    </div>
</template>

<script>
import {dateFomat} from '@/utils/formValidate'
import {userStatistics} from '@/api/report'
export default {
    props:["date"],
    watch:{
        date(newDate,oldDate){
            this.drawChart();
        }
    },
    mounted() {
      this.drawChart();
    },
    methods:{
        drawChart() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("vip"));
            // console.log(myChart)
            // 指定图表的配置项和数据
            let option = {
            title: {
                text: "会员统计",
            },
            tooltip: {},
            legend: {
                data: ["所有会员","新增会员"],
            },
            xAxis: {
                data: ["5-1", "5-2", "5-3", "5-4", "5-5", "5-6"],
            },
            yAxis: {},
            series: [
                {
                name: "所有会员",
                type: "line",
                data: [5, 20, 36, 10, 10, 20],
                },
                {
                name: "新增会员",
                type: "line",
                data: [4, 22, 16, 5, 5, 20],
                },
            ],
        };
        myChart.showLoading();
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        userStatistics(this.date[0],this.date[1]).then(res=>{
            // console.log(res.data)
            myChart.setOption({
                xAxis: {
                    data: dateFomat(res.data.dateList),
                },
                series: [
                    {
                        data: res.data.totalUserList.split(','),
                    },
                    {
                        data: res.data.newUserList.split(','),
                    },
                ],
            })
            myChart.hideLoading();
        })
        
        },
    },

}
</script>

<style>
.vip{
    height: 400px;
  width: 600px;
}
</style>